<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三子棋游戏</title>
<style>

/*

display: grid;：指定该元素为网格布局。
grid-template-columns: repeat(3, 1fr);：定义了网格布局的列数为3列，每列的宽度平均分配。
gap: 2px;：设置了网格中元素之间的间距为2像素。
max-width: 300px;：限制了该元素的最大宽度为300像素。
margin: 0 auto;：将该元素水平居中显示。
这些样式规则的组合将被应用于具有"board"类的HTML元素，使其呈现为一个具有3列网格布局、列之间有2像素间距、最大宽度为300像素且水平居中显示的元素
*/
    
  .board 
  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    max-width: 300px;
    margin: 0 auto;
  }

/*
display: flex;：将该元素设置为弹性布局，使其内部元素能够灵活地排列。
justify-content: center;：水平居中内部元素。
align-items: center;：垂直居中内部元素。
height: 100px;：设置元素的高度为100像素。
background-color: lightblue;：设置背景颜色为浅蓝色。
font-size: 2rem;：设置字体大小为相对于根元素的2倍大小。
cursor: pointer;：将鼠标指针设置为手型，表示该元素可点击。
这些样式规则的组合将被应用于具有"cell"类的HTML元素，使其呈现为一个具有水平和垂直居中内容、高度为100像素、浅蓝色背景、字体大小为2倍根元素大小且具有点击指针的元素。
*/

  .cell 
  {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    background-color: lightblue;
    font-size: 2rem;
    cursor: pointer;
  }
</style>
</head>
<body>
<div class="board"></div>
<script>

  // 找到文档中具有类名为"board"的第一个元素，并将其存储在名为board的变量中，以便在后续的 JavaScript 代码中对该元素进行操作或引用  
  // 
  const board = document.querySelector('.board');
  let currentPlayer = 'X';
  // 判断棋盘
  let gameBoard = ['', '', '', '', '', '', '', '', ''];
  // 枚举所有获胜可能，后续改动为方程斜率判断获胜
  const winningCombinations = 
  [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];

// 检查是否分出胜负、如果分出胜负则重置棋盘
  function checkWinner() 
  {
    for (let i = 0; i < winningCombinations.length; i++) 
    {
      const [a, b, c] = winningCombinations[i];
      // JS中 = 是复制  == 是比较  === 是包含类型和数值的比较
      if (gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c]) 
      {
        // 结束了，但也要把最终结果更新一下
        console.log(gameBoard) ; 
        render();
        // 弹窗提示
        alert(`${currentPlayer} 赢了！`);
        resetGame();
      }
    }
    if (!gameBoard.includes('')) 
    {
        console.log(gameBoard) ; 
      render();
      // 弹窗提示
      alert("平局！");
      resetGame();
    }
  }


// 重置棋盘
  function resetGame() 
  {
    gameBoard = ['', '', '', '', '', '', '', '', ''];
    currentPlayer = 'X';
    render();
  }

// index 下标的元素被点击后的回调函数 
// 所以要新增尾删玩法在此添加代码即可
  function handleCellClick(index) 
  {
    if (gameBoard[index] === '' && !checkWinner()) 
    {
      gameBoard[index] = currentPlayer;

      // 根据function handleCellClick(index)的点击对gameBoard的修改，更新前端界面
      render();
      checkWinner();
      // 更新下棋者 
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
  }

/*
gameBoard.forEach((cell, index) => { ... });：遍历gameBoard数组中的每个元素，对每个元素执行一系列操作。
document.createElement('div');：创建一个新的<div>元素。
cellElement.classList.add('cell');：给新创建的<div>元素添加一个名为cell的类。
cellElement.textContent = cell;：设置新创建的<div>元素的文本内容为当前数组元素的值。
cellElement.addEventListener('click', () => handleCellClick(index));：为新创建的<div>元素添加点击事件监听器，
当元素被点击时调用handleCellClick(index)函数。
board.appendChild(cellElement);：将新创建的<div>元素添加到名为board的父元素中。
*/

/*
<div> 元素是 HTML 中的一个通用块级元素，它没有特定的语义，
通常用作容器来组织和包裹其他 HTML 元素。<div> 元素本身不会添加任何样式或行为，
而是通过 CSS 样式表或 JavaScript 脚本来定义其外观和功能。
*/


  // 初始化board类表单结构，给每各色块初始化点击事件
  // 根据function handleCellClick(index)的点击对gameBoard的修改，更新前端界面

  function render() 
  {
    // innerHTML 是一个属性，用于获取或设置某个 HTML 元素的内部 HTML 内容
    // 这行代码的作用是清空了board元素内的所有 HTML 内容，使其变为空。这通常用于在动态更新网页内容时清空特定元素的内容
    board.innerHTML = '';

    /*
    箭头函数（Arrow Functions）是ECMAScript 6（ES6）引入的一种新的函数写法，
    它的语法更简洁，使用起来更加直观。箭头函数没有自己的`this`、`arguments`、`super`和`new.target`绑定，
    它们的上下文（context）继承自它们所在的词法作用域。

    格式： (参数1, 参数2, ...) => {...}
    */

    // gameBoard.forEach((cell, index) => { ... });：遍历gameBoard数组中的每个元素，对每个元素执行一系列操作。
    gameBoard.forEach((cell, index) => 
    {
      //document.createElement('div');：创建一个新的<div>元素。
      const cellElement = document.createElement('div');
      // cellElement.classList.add('cell');：给新创建的<div>元素添加一个名为cell的类。
      cellElement.classList.add('cell');
      // ellElement.textContent = cell;：设置新创建的<div>元素的文本内容为当前数组元素的值。
      cellElement.textContent = cell;
      // 当元素被点击时调用handleCellClick(index)函数。
      cellElement.addEventListener('click', () => handleCellClick(index)); 
      // 将新创建的<div>元素添加到名为board的父元素中。
      board.appendChild(cellElement);
    });
  }

  // 初始化board类表单结构，给每各色块初始化点击事件
  render();
</script>
</body>
</html>
